<template>
    <div class="bookList">
        <div class="item" @click="$router.push('/bookDetail?id=' + item.fictionId)" v-for="(item,index) in books" :key="index">
            <van-image lazy-load :src="item.image" height="100%" width="96" class="image">
                <template v-slot:error>
                    <van-image src="http://www.fyhuabo.com/images/nopic.gif" height="100%" width="96" class="image"></van-image>
                </template>
            </van-image>
            <div class="bookInfo">
                <div class="name">{{ item.fictionName }}</div>
                <div class="fictionAuthor">
                    {{ item.fictionAuthor }}
                    <span class="ddd"></span>
                    {{ item.fictionLabel }}
                </div>
                <div class="van-multi-ellipsis--l3">{{ item.fictionInfo }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props : ['books'],
    data() {
        return {
            
        }
    },
}
</script>

<style scoped>
.bookList{
    padding: 10px 15px;
    background: #fff;
    width: calc(100% - 30px);
}
.item{
    position: relative;
    width: calc(100%);
    height: 120px;
    padding: 10px 0;
    color: #888;
}
.item >>> .van-image__img{
    border-radius: 7px;
}

.bookInfo{
    position: absolute;
    left: 106px;
    top: 10px;
    width: calc(100% - 116px);
}
.name{
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 10px;
    color: #333;
}
.fictionAuthor{
    font-size: 14px;
    padding-bottom: 10px;
}
</style>